<template>
  <div class="matter-info">
    <el-form :model="formData" label-width="85px">
      <el-form-item label="事项标题" prop="matterTitle">
        <el-input v-model="formData.matterTitle" disabled />
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="业务领域" prop="domainId">
            <DictionarySelect
              v-model="formData.domainId"
              disabled
              parent-dictionary-value="runway"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交办领导" prop="assignLeader">
            <LeaderSelect
              v-model="formData.assignLeader"
              assignLeaders
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交办类型" prop="assignType">
            <DictionarySelect
              v-model="formData.assignType"
              disabled
              parent-dictionary-value="taskType"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="责任领导" prop="responsibleLeader">
            <LeaderSelect v-model="formData.responsibleLeader" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="重点关注" prop="isFocus">
            <FocusSelect v-model="formData.isFocus" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事项状态">
            <MatterShow :status="formData.matterStatus" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="牵头单位">
        <UnitSelect v-model="formData.leadUnitId" disabled />
      </el-form-item>
      <el-form-item label="办理要求" prop="handleRequire">
        <el-input
          v-model="formData.handleRequire"
          type="textarea"
          disabled
          :autosize="{ minRows: 5 }"
        />
      </el-form-item>
      <el-form-item v-if="showDeadlineTable" label="办理期限">
        <DeadlineTable :model-value="formData.matterDeadlinesList" disabled />
      </el-form-item>
      <el-form-item v-if="showDeadlineTable" label="抄送单位">
        <CopyUnitTable :model-value="formData.copyUnits" disabled />
      </el-form-item>
      <el-form-item label="附件列表">
        <FileTable :model-value="formData.fileList" disabled />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import DictionarySelect from '@/components/dictionary/DictionarySelect.vue'
import DeadlineTable from '@/views/mission/task/thing/DeadlineTable.vue'
import LeaderSelect from '@/components/leader/LeaderSelect.vue'
import { reactive } from 'vue'
import { getDeadlinesByMatterId } from '@/api/mission/thing'
import { initIFileList } from '@/plugins/file'
import FileTable from '@/components/file/FileTable.vue'
import UnitSelect from '@/components/unit/UnitSelect.vue'
import CopyUnitTable from '@/views/mission/task/thing/CopyUnitTable.vue'
import MatterShow from '@/components/statusShow/matter/MatterShow.vue'
import FocusSelect from '@/components/statusShow/focus/FocusSelect.vue'

const { showDeadlineTable = true } = defineProps<{
  showDeadlineTable?: boolean
}>()

const formData = reactive({
  matterId: null,
  matterTitle: null,
  domainId: null,
  assignLeader: null,
  assignType: null,
  responsibleLeader: null,
  isFocus: 0,
  handleRequire: null,
  leadUnitId: null,
  matterDeadlinesList: [],
  copyUnits: [],
  fileList: [],
  matterStatus: 0,
})

defineExpose({ setData, reset })

async function setData(data: any) {
  Object.assign(formData, {
    matterId: data.matterId,
    matterTitle: data.matterTitle,
    domainId: data.domainId,
    assignLeader: data.assignLeader,
    assignType: data.assignType,
    responsibleLeader: data.responsibleLeader,
    isFocus: data.isFocus,
    handleRequire: data.handleRequire,
    leadUnitId: data.leadUnitId,
    fileList: initIFileList(data.fileList),
    copyUnits: data.ccUnitIds ? data.ccUnitIds?.split(',')?.map(Number) : [],
    matterStatus: data.matterStatus,
  })
  if (showDeadlineTable) {
    await getDeadlineList()
  }
}

async function getDeadlineList() {
  const { data } = await getDeadlinesByMatterId(formData.matterId)
  if (data.status === 200) {
    formData.matterDeadlinesList = data.data
  }
}

function reset() {
  Object.assign(formData, {
    matterId: null,
    matterTitle: null,
    domainId: null,
    assignLeader: null,
    assignType: null,
    responsibleLeader: null,
    isFocus: 0,
    handleRequire: null,
    leadUnitId: null,
    matterDeadlinesList: [],
    fileList: [],
    copyUnits: [],
    matterStatus: 0,
  })
}
</script>

<style scoped lang="scss"></style>
